<script setup>
import { ref } from 'vue'
import { UploadOutlined, HomeOutlined } from '@ant-design/icons-vue'
import SubmitLive from './VSubmitLive/index.vue'
import TrainingDetail from './TrainingDetail/index.vue'
const tabList = [
  { key: 'tab1', tab: '管理培训活动' },
  { key: 'tab2', tab: '发布培训活动' }
]

const key = ref('tab1')
const noTitleKey = ref('app')
const onTabChange = (value, type) => {
  console.log(value, type)
  if (type === 'key') {
    key.value = value
  } else if (type === 'noTitleKey') {
    noTitleKey.value = value
  }
}
</script>

<template>
  <div class="container">
    <a-card
      style="width: 100%; height: 100%"
      title="培训活动"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="(key) => onTabChange(key, 'key')"
    >
      <template #customTab="item">
        <span v-if="item.key === 'tab1'"> <HomeOutlined />{{ item.tab }} </span>
        <span v-if="item.key === 'tab2'">
          <UploadOutlined />{{ item.tab }}
        </span>
      </template>
      <template #extra>
        <a href="#">More</a>
      </template>
      <div v-if="key === 'tab1'">
        <training-detail />
      </div>
      <div v-if="key === 'tab2'">
        <submit-live />
      </div>
    </a-card>
    <br />
    <br />
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
</style>
